<template>
  <div class="label-remark">
    <!-- 微信号 -->
    <div class="friend-item">
      <div class="friend-item-title">微信号</div>
      <div class="friend-item-content">{{ currentFriend.FriendNo || "" }}</div>
    </div>
    <!-- 昵称 -->
    <div class="friend-item">
      <div class="friend-item-title">昵称</div>
      <div class="friend-item-content">
        {{ currentFriend.FriendNick || "" }}
      </div>
    </div>
    <!-- 备注 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">备注</span>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="modifyMemo"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteMemo"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">{{ currentFriend.Memo || "" }}</div>
    </div>
    <!-- 标签 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">标签</span>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            circle
            @click="addNewLabel"
          ></el-button>
          <el-button
            type="primary"
            plain
            icon="el-icon-price-tag"
            circle
            @click="showLabelDialog"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">
        <el-tag
          v-for="(label, index) in labelIds"
          :key="index"
          closable
          type
          @close="removeLabel(label)"
          >{{ labelMap[label] || label }}</el-tag
        >
      </div>
    </div>
    <!-- 电话 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">电话</span>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            circle
            @click="addPhone"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteAllPhone"
            title="清空号码"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">
        <div class="phone-item" v-for="(phone, index) in phones" :key="index">
          <span v-text="phone"></span>
          <el-button
            class="delete-one-phone"
            type="primary"
            plain
            icon="el-icon-close"
            circle
            @click="deleteOnePhone(index)"
          ></el-button>
        </div>
      </div>
    </div>
    <!-- 描述 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">描述</span>
        <div class="btns">
          <el-button
            type="primary"
            plain
            icon="el-icon-edit-outline"
            circle
            @click="modifyDesc"
          ></el-button>
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            circle
            @click="deleteDesc"
          ></el-button>
        </div>
      </div>
      <div class="friend-item-content">{{ currentFriend.Desc || "" }}</div>
    </div>
    <!-- 来源 -->
    <div class="friend-item">
      <div class="friend-item-title">
        <span class="tip">来源</span>
      </div>
      <div class="friend-item-content">
        <div
          v-if="currentFriend.Source"
          v-text="$options.filters.getFriendSource(currentFriend.Source)"
        ></div>
      </div>
    </div>

    <!-- dialog -->
    <el-dialog
      title="添加标签"
      width="30%"
      :modal="false"
      :visible.sync="labelDialogVisible"
      :before-close="handleClose"
    >
      <p class="p-class">手机标签</p>
      <span
        class="label-class"
        :class="{ chose: currentTag === label.LabelName }"
        v-for="(label, index) in labels"
        :key="'label' + index"
        @click="
          () => {
            (currentTag = label.LabelName), (tagKey = label.LabelId);
          }
        "
        >{{ label.LabelName }}</span
      >

      <p class="p-class">公共标签</p>
      <span
        class="label-class"
        :class="{ chose: currentTag === tag.name }"
        v-for="(tag, index) in tags"
        :key="'tag' + index"
        @click="currentTag = tag.name"
        >{{ tag.name }}</span
      >

      <span slot="footer" class="dialog-footer">
        <el-button @click="labelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyLabels">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'LabelRemark',
  data() {
    return {
      labelDialogVisible: false,
      currentTag: '', // 标签名
      tagKey: 0, // 标签id
    }
  },
  props: {
    currentFriend: {
      type: Object,
      required: true,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    ...mapGetters({
      labels: 'nedb/labels', // 当前微信的所有标签
      tags: 'conversation/publicTags', // 当前用户的公共标签
    }),
    // 该好友的标签Id[1,2,3...]
    labelIds() {
      let labelIds = []
      if (this.currentFriend.LabelIds) {
        labelIds = this.currentFriend.LabelIds.split(',')
      }
      return labelIds
    },
    labelMap() {
      let lm = {}
      if (this.labels.length > 0) {
        for (const label of this.labels) {
          lm[label.LabelId] = label.LabelName
        }
      }
      return lm
    },
    phones() {
      if (this.currentFriend.Phone) {
        // let phonesArry = this.currentFriend.Phone.replace(/,$/, '')
        let phonesArry = this.currentFriend.Phone.replace(/，$/, '')
        return phonesArry.split('，')
      }
      return []
    },
  },
  methods: {
    // 修改备注
    modifyMemo() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (this.currentFriend.isGh) {
        this.$message.warning('不能修改公众号的备注！')
        return
      }
      this.$prompt(`修改<b style="color:green;"> ${this.currentFriend.FriendNick} </b>的备注`, '修改备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: this.currentFriend.Memo,
        inputValue: this.currentFriend.Memo,
        dangerouslyUseHTMLString: true,
        inputPattern: /\S{1,50}/,
        inputErrorMessage: '备注长度1-50，不能含有特殊字符！'
      }).then(({ value }) => {
        let message = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: this.currentFriend.FriendId,
          Memo: value,
        }
        this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 删除备注
    deleteMemo() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (!this.currentFriend.Memo) {
        this.$message.warning('该好友没有备注，无需删除！')
        return
      }
      this.$confirm('删除备注?', '删除备注', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let message = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: this.currentFriend.FriendId,
          DelFlag: 1,
        }
        this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 修改描述
    modifyDesc() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (this.currentFriend.isGh) {
        this.$message.warning('不能修改公众号的描述！')
        return
      }
      this.$prompt(`修改<b style="color:green;"> ${this.currentFriend.FriendNick} </b>的描述`, '修改描述', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: this.currentFriend.Desc,
        inputValue: this.currentFriend.Desc,
        dangerouslyUseHTMLString: true,
        inputPattern: /\S{1,200}/,
        inputErrorMessage: '备注长度1-200，不能含有特殊字符！'
      }).then(({ value }) => {
        let message = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: this.currentFriend.FriendId,
          Desc: value
        }
        this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    // 删除描述
    deleteDesc() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (!this.currentFriend.Desc) {
        this.$message.warning('该好友没有描述，无需删除！')
        return
      }
      this.$confirm('删除描述?', '删除描述', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let message = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: this.currentFriend.FriendId,
          DelFlag: 2,
        }
        this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 添加电话
    addPhone() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (this.currentFriend.isGh) {
        this.$message.warning('不能修改公众号的电话！')
        return
      }
      //   this.$prompt('固话或者手机号码', '添加电话', {
      this.$prompt(`修改<b style="color:green;"> ${this.currentFriend.FriendNick} </b>的电话号码`, '修改电话号码', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPlaceholder: '两个号码之间用逗号隔开',
        inputValue: this.currentFriend.Phone,
        dangerouslyUseHTMLString: true,
        // inputPattern: /0\d{2,3}-[1-9]\d{6,7}|1[3-9]\d{9}/,
        // inputErrorMessage: '电话号码格式或长度不对！'
      }).then(({ value }) => {
        let preg = new RegExp(/0\d{2,3}-[1-9]\d{6,7}|1[3-9]\d{9}/)
        let phoneArry = value.replace(/,/g, '，').split('，')
        let phoneAccept = phoneArry.filter((p) => {
          return preg.test(p)
        })
        if (phoneAccept.length === 0) {
          this.$message.warning('电话号码的格式有问题，请重新输入！')
        } else {
          // if (this.currentFriend.Phone) {
          //   phone = this.currentFriend.Phone + value
          // }
          let message = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: this.currentFriend.FriendId,
            Phone: phoneAccept.join(',').replace(/,/g, '，')
          }
          this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
        }

      }).catch((err) => {
        this.$message({
          type: 'warning',
          message: err
        });
      });
    },
    // 清空所有电话
    deleteAllPhone() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (!this.currentFriend.Phone) {
        this.$message.warning('该好友没有电话，无需清空！')
        return
      }
      this.$confirm('清空电话?', '清空电话', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let message = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: this.currentFriend.FriendId,
          DelFlag: 4,
        }
        this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除选择的电话
    deleteOnePhone(index) {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (!this.currentFriend.Phone) {
        this.$message.warning('该好友没有电话，无需清空！')
        return
      }
      this.$confirm('删除该电话?', '删除该电话', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let phoneStr = ''
        for (const phone of this.phones) {
          if (phone !== this.phones[index]) {
            // phoneStr = phone + ','
            phoneStr = phone + '，'
          }
        }
        phoneStr = phoneStr.replace(/，$/, '')
        let message = {
          WeChatId: this.currentFriend.WeChatId,
          FriendId: this.currentFriend.FriendId,
          Phone: phoneStr
        }
        if (phoneStr !== '') {
          this.$store.dispatch('websocket/ModifyFriendMemoTask', message)
        } else {
          let delMessage = {
            WeChatId: this.currentFriend.WeChatId,
            FriendId: this.currentFriend.FriendId,
            DelFlag: 4,
          }
          this.$store.dispatch('websocket/ModifyFriendMemoTask', delMessage)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 新建一个标签并给好友打上
    addNewLabel() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (this.currentFriend.isGh) {
        this.$message.warning('不能给公众号打标签！')
        return
      }
      this.$prompt('标签名不能与现有的重复！', '新建标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S{1,200}/,
        inputErrorMessage: '标签长度不对'
      }).then(({ value }) => {
        let message = {
          WeChatId: this.currentFriend.WeChatId, //string 商家所属微信号
          LabelName: value, //string 标签名 id!=0 会设置为该标签名
          LabelId: 0, //int32 标签id，0则新建标签（如存在同名标签则会失败）
          AddList: this.currentFriend.FriendId, //string 新增的wxid，用,分隔
          // DelList: message.DelList || '', //string 删除的wxid，用,分隔
        }
        this.$store.dispatch('websocket/ContactLabelTask', message)
      }).catch(() => {
        // this.$message.info('取消输入')
      });
    },
    // 添加标签
    modifyLabels() {
      let canSubmit = true
      // 如果手机上已经存在的标签 找到对应的LabelId
      if (this.tagKey === 0) {
        for (const label of this.labels) {
          if (label.LabelName === this.currentTag) {
            this.tagKey = label.LabelId
            break
          }
        }
      }
      // 如果是已经打过的标签 就返回
      if (this.currentTag) {
        for (const li of this.labelIds) {
          if (this.labelMap[li] === this.currentTag) {
            canSubmit = false
            break
          }
        }
      } else {
        this.$message.warning('请选择一个标签！')
        return
      }
      // 可以打标签
      if (canSubmit) {
        let message = {
          WeChatId: this.currentFriend.WeChatId, //string 商家所属微信号
          AddList: this.currentFriend.FriendId, //string 新增的wxid，用,分隔
          LabelName: this.currentTag, //string 标签名 id!=0 会设置为该标签名
          LabelId: this.tagKey, //int32 标签id，0则新建标签（如存在同名标签则会失败）
        }
        this.$store.dispatch('websocket/ContactLabelTask', message)
        // 隐藏dialog
        this.labelDialogVisible = false
        // 数据重置
        this.currentTag = ''
        this.tagKey = 0
      } else {
        this.$message.error('该标签已经打过')
      }
    },
    // 移除好友的标签
    removeLabel(labelId) {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      this.$confirm('移除该标签?', '移除标签', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let message = {
          WeChatId: this.currentFriend.WeChatId, //string 商家所属微信号
          // LabelName: value, //string 标签名 id!=0 会设置为该标签名
          LabelId: labelId, //int32 标签id，0则新建标签（如存在同名标签则会失败）
          // AddList: this.currentFriend.FriendId, //string 新增的wxid，用,分隔
          DelList: this.currentFriend.FriendId, //string 删除的wxid，用,分隔
        }
        this.$store.dispatch('websocket/ContactLabelTask', message)
      }).catch(() => {
        // this.$message.info('已取消删除');
      });
    },
    // 显示dialog
    showLabelDialog() {
      if (!this.currentFriend.FriendId) {
        this.$message.warning('请先选择一个好友！')
        return
      }
      if (this.currentFriend.isGh) {
        this.$message.warning('不能给公众号打标签！')
        return
      }
      this.labelDialogVisible = true
    },
    // 处理关闭
    handleClose(done) {
      this.currentTag = ''
      this.tagKey = 0
      done();
      //   this.$confirm('确认关闭？')
      //     .then(_ => {
      //       done();
      //     })
      //     .catch(_ => { });
    },
  },
  created() {
    // 获取公共标签
    if (this.tags.length === 0) {
      this.$store.dispatch('websocket/GetCommonTags')
    }
  }
}
</script>

<style lang="scss" scoped>
.label-remark {
  width: 100%;
  height: 100%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;

  .el-button {
    padding: 2px;
  }

  .friend-item {
    width: 100%;
    margin: 5px 0;

    .friend-item-title {
      background: $bg-color-nav-title-3;
      padding: 5px;
      display: flex;
      justify-content: space-between;
      .tip {
        line-height: 20px;
      }
      .btns {
        line-height: 20px;
      }
    }

    .friend-item-content {
      background: white;
      min-height: 30px;
      padding: 5px;
      //   border: solid red 1px;
      .phone-item {
        // border: solid red 1px;
        padding: 5px 0;
        .delete-one-phone {
          margin-left: 20px;
        }
      }
      .el-tag {
        // border: solid yellow 1px;
        margin: 2px;
      }
    }
  }

  ::v-deep .el-dialog {
    .p-class {
      margin: 2px;
    }
    .label-class {
      color: #409eff;
      background-color: #ecf5ff;
      border-radius: 4px;
      border-color: solid #d9ecff 1px;
      display: inline-block;
      height: 32px;
      line-height: 32px;
      font-size: 12px;
      padding: 0 5px;
      margin: 2px;
      cursor: pointer;
    }
    .chose {
      color: #ffd04b;
    }
  }
}
</style>

